<template>
  <div style="padding: 10px">
    <Row label="按钮名称">
      <a-input v-model="fieldConfig.buttonName" placeholder="请输入按钮名称"/>
    </Row>
    <Row label="图标">
      <IconSelector v-model="fieldConfig.icon"/>
    </Row>
    <Row label="图标">
      <a-select v-model="fieldConfig.buttonType">
        <a-select-option data-role="ignore-select-field" value="default">默认</a-select-option>
        <a-select-option data-role="ignore-select-field" value="dashed">虚线</a-select-option>
        <a-select-option data-role="ignore-select-field" value="primary">主要</a-select-option>
        <a-select-option data-role="ignore-select-field" value="danger">危险</a-select-option>
        <a-select-option data-role="ignore-select-field" value="link">链接</a-select-option>
      </a-select>
    </Row>
    <Row label="形状">
      <a-select v-model="fieldConfig.shape">
        <a-select-option data-role="ignore-select-field" value="circle">circle</a-select-option>
        <a-select-option data-role="ignore-select-field" value="round">round</a-select-option>
        <a-select-option data-role="ignore-select-field" value="default">default</a-select-option>
      </a-select>
    </Row>
    <Row label="点击事件">
      <a-textarea v-model="fieldConfig.onClick"/>
    </Row>
  </div>
</template>
<script>
import {createDefaultButtonConfig} from '@/components/hhd/design/FormDesigner/field/comps/custom/button/CustomButton';
import Row from '@/components/hhd/design/FormDesigner/base/Row.vue';
import {createProps} from '@/utils';
import IconSelector from '@/components/hhd/design/DesignTable/IconSelector/IconSelector.vue';

export default {
  name: 'CustomButtonConfig',
  components: {IconSelector, Row},
  props: {
    fieldConfig: createProps(Object, createDefaultButtonConfig)
  },
};
</script>